HTML Input Types

Here in this article, we will discuss the <input> element type values.

HTML <input> type attribute

The type attribute of < input> element decides which input field should be displayed on the page.  It could be a text, date, time, URL, or submit button. The type value we pass in the <input> element the web page will display the corresponding input block.

• type="button"
• type="checkbox"
• type="color"
• type="date"
• type="datetime-local"
• type="email"
• type="file"
• type="hidden"
• type="image"
• type="month"
• type="number"
• type="password"
• type="radio"
• type="range"
• type="reset"
• type="search"
• type="submit"
• type="tel"
• type="text"
• type="time"
• type="url"
• type="week"

Text

To define an input block for the single-line text we can use the text value for the type attribute.

Example

<form>
  <label for="name">Name:</label><br>
  <input type="text" id="name" name="name">
</form>

Preview

  Name: 

Password

The password value is used when we want the user to enter a password in the input block.

Example

<form>
  <label for="pass">Password:</label><br>
  <input type="password" id="pass" name="pass">
</form>

Preview

  Password:

Submit

Every <form> element contains a submit button, this submits button is used to submit the form data.

Example

<form action="/login.php">
   
  <label for="username">Username:</label><br>
  <input type="text" id="username" name="username"><br>
  <label for="pass">Password:</label><br>
  <input type="password" id="pass" name="pass">
  <input type="submit" value="Login">

</form>

Output

Username:

Password:

The value specified in the value attribute will be displayed on the submit button.

Reset

The reset value reset all the filled data. If the input has default values than the data would be reset to their default values.

Example

<form action="/signup.php">
  
  <label for="name">Name</label><br>
  <input type="text" id="name" name="name"><br>
  
  <label for="mail">Email </label><br>
  <input type="email" id="mail" name="mail"><br>

  <label for="pwd">Password</label><br>
  <input type="password" id="pwd" name="pwd"><br>
  
  <input type="submit" value="Sign Up">
  <input type="reset">

</form>

Preview

Name

Email 

Password

Radio

Radio attribute is used to define a number of options from which the user can select only one.

Example

<form>
  Select Programming Language:<br>
  <input type="radio" id="python" name="code">
  <label for="python">Python</label><br>
  <input type="radio" id="java" name="code" >
  <label for="java">Java</label><br>
  <input type="radio" id="c" name="code">
  <label for="c">C</label>
</form>

Preview

Select Programming Language:
 Python
 Java
 C

Checkbox

The checkbox value allow the user to select more than one option.

Example

<form>
  Select the Programming Language:<br>
  <input type="checkbox" id="python" name="code">
  <label for="python">Python</label><br>
  <input type="checkbox" id="java" name="code" >
  <label for="java">Java</label><br>
  <input type="checkbox" id="c" name="code">
  <label for="c">C</label>
</form>

Preview

Select the Programming Language:
 Python
 Java
 C

Button

The button type create a clickable button on the web page.

Example

 <input type="button" value="Click">

Preview

Color

The color type allows the user to select the colour data. It depends on the browser whether it supports the color value or not.

Example

<form>
  <label for="colour">Select the Colour</label>
  <input type="color" id="colour" name="colour">
</form>

Preview

Select the Colour:

Date

The date value is used when we want the user to enter a specific date.

Example

<form>
  <label for="dob">Select Date:</label>
  <input type="date" id="dob" name="dob">
</form>

Preview

Birthday:

Datetime-local

Datetime-local value defines a date and time input block.

Example

<form>
  <label for="book">Select the Checkout Date and Time:</label>
  <input type="datetime-local" id="book" name="book">
</form>

Preview

Select the Checkout Date and Time:

Email

email value is used when we want the user to enter the email address. It also provides a form validation if the user entered an invalid email address.

Example

<form>
  <label for="mail">Email:</label>
  <input type="email" id="mail" name="mail">
</form>

Preview

Email:  

File

The file value is used when we want the user to upload a file from the system.

Example

<form>
  <label for="doc">Upload File:</label>
  <input type="file" id="doc" >
</form>

Preview

Upload File:

Month

The month value defines an input block for month and year data.

Example

<form>
  <label for="month">Select Month:</label>
  <input type="month" id="month" name="month">
</form>

Preview

Select Month:  

Number

The number value specifies an input block which accepts only numbers.

Example

<form>
  <label for="age">Age:</label>
  <input type="number" id="age" name="age">
</form>

Ouptut

Age:  

Range

The range value create a slider that signifies a range of number. By default, the range is 0 to 100, but it can be altered using min and max attributes.

Example

<form>
  <label for="vol">Between 0 to 500:</label>
  <input type="range" id="vol" name="vol" min="0" max="500">
</form>

Preview

Between 0 to 500:

Tel

The tel value specifies an input block for phone and telephone number.

Example

<form>
   <label for="num">Phone Number:</label>
   <input type="tel" id="num" name="num"
   pattern="[0-9]{4}-[0-9]{2}-[0-9]{4}">
</form>

Preview

Phone Number:

Time

time value is used for time-related input.

Example

<form> 
 <label for="show">Select Time:</label>
 <input type="time" id="show" name="show" >
</form>

Preview

Select Time: 

URL

url value specifies an input field that only accepts appropriate URL address.

Example

<form>
  <label for="web">Your Website: </label>
  <input type="url" id="web" name="web">
</form>

Preview

Your Website: 

Week

The week value is used to select the week number from a year.

Example

<form>
  <label for="week">Select Week: </label>
  <input type="week" id="week" name="week">
</form>

Preview

Select week: 

Summary

• The type attribute defines the input block type for form.
• The text value specifies single-line text input.
• The password value is used for password inputs.
• radio value is used to select one option from multiple choices.
• reset value can reset the form data.
• date, week, and datetime-local values deal with date-related data.